<template>
  <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
    <el-row>
      <el-col :span="12" class="card-box">
        <el-form-item label="创建时间">
          <el-date-picker style="width: 240px" v-model="queryParams.time" value-format="yyyy-MM-dd" type="daterange"
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" class="card-box">
        <h3 style="text-align: center;">人才学历人数统计</h3>
        <div id="education" style="height: 420px" />
      </el-col>
      <el-col :span="12" class="card-box">
        <h3 style="text-align: center;">人才专业人数统计</h3>
        <div id="speciality" style="height: 420px" />
      </el-col>
    </el-row>

  </el-form>
</template>
<script>
import { getStatisticsInfo } from "@/api/system/type";

import * as echarts from "echarts";
export default {
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        tableName: undefined,
        tableComment: undefined,
        time: undefined
      },
      echartsLoaded: false,
      tiao: null,
      // 统计命令信息
      commandstats: null,
      wastage: null,
      wastageDataInfo: null,
    };
  },
  mounted() {


  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      getStatisticsInfo(this.queryParams).then((response) => {

        var education = document.getElementById('education');
        var educationChart = echarts.init(education);
        var educationOption;

        educationOption = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: response.educationTitle,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: 'Direct',
              type: 'bar',
              barWidth: '60%',
              data: response.educationData
            }
          ]
        };

        educationOption && educationChart.setOption(educationOption);






        var speciality = document.getElementById('speciality');
        var specialityChart = echarts.init(speciality);
        var specialityOption;

        specialityOption = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: response.specialityTitle,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: 'Direct',
              type: 'bar',
              barWidth: '60%',
              data: response.specialityData
            }
          ]
        };

        specialityOption && specialityChart.setOption(specialityOption);




      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      console.log('查询的数据' + JSON.stringify(this.queryParams))
      this.queryParams.pageNum = 1;
      this.initData();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    resetForm(){
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        tableName: undefined,
        tableComment: undefined,
        time: undefined
      }
    }
  }
}
</script>
<style>
.chart-container {
  width: 600px;
  height: 400px;
}
</style>

